<template>
  <a-spin size="large" :spinning="spinning">
    <div class="userMain">
      <div class="descriptions">
        <div class="user-avatar">
          <a-avatar
            :src="userinfo.avatar"
            alt="用户头像"
            style="width: 100px; height: 100px; cursor: pointer"
            @click="upload"
            class="avatar"
          >
          </a-avatar>
          <span class="iconfont icon-zhaoxiangji icon"></span>
          <input id="uploadRef" style="visibility: hidden" type="file" />
        </div>
        <div class="description">
          <a-row :getter="24" class="row">
            <a-col :span="12" class="col">
              <span>用户名：</span>
              <div>{{ userinfo.username }}</div>
            </a-col>
            <a-col :span="12" class="col">
              <span>居住地：</span>
              <div>{{ userinfo.userAddress }}</div>
            </a-col>
          </a-row>
          <a-row class="row">
            <a-col :span="12" class="col">
              <span>电话：</span>
              <div>{{ userinfo.phone }}</div>
            </a-col>
            <a-col :span="12" class="col">
              <span>邮箱：</span>
              <div>{{ userinfo.email }}</div>
            </a-col>
          </a-row>
          <a-row class="row">
            <a-col :span="12" class="col">
              <span>Ip：</span>
              <div>{{ userinfo.ip }}</div>
            </a-col>
            <a-col :span="12" class="col">
              <span>个性签名：</span>
              <div>种一颗树最好的时间是现在</div>
            </a-col>
          </a-row>
        </div>
      </div>

      <div class="tabe-info">
        <a-tabs v-model:activeKey="activeKey">
          <a-tab-pane key="1">
            <template #tab>
              <span>
                <ProfileOutlined />
                基础信息
              </span>
            </template>
            <userInfo></userInfo>
          </a-tab-pane>
          <a-tab-pane key="2">
            <template #tab>
              <span>
                <android-outlined />
                登录日志
              </span>
            </template>
            <userLogs />
          </a-tab-pane>
          <a-tab-pane key="3">
            <template #tab>
              <span>
                <UserOutlined />
                账号设置
              </span>
            </template>
            <accountSet />
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </a-spin>
</template>

<script setup>
import { computed, ref, getCurrentInstance } from "vue";
import { userStore } from "@/store/modules/user.js";
import userInfo from "./components/userInfo/index.vue";
import userLogs from "./components/userLogs/index.vue";
import accountSet from "./components/accountSet/index.vue";
import { FileUpload } from "@/api/index.js";
import { updateUserInfo } from "@/api/user.js";
import { message } from "ant-design-vue";
import Compressor from "compressorjs";
import {
  AndroidOutlined,
  ProfileOutlined,
  UserOutlined,
} from "@ant-design/icons-vue";

const user = userStore();
const activeKey = ref("1");
let spinning = ref(false);
const userinfo = computed(() => user.userinfo);
let avatar = ref("");
const upload = () => {
  spinning.value = true;
  const uploadRef = document.getElementById("uploadRef");
  uploadRef.click();
  uploadRef.addEventListener("change", async (e) => {
    let file = e.target.files[0];
    ReviewAvatar(file);
    let newFile = await handelFile(file);
    uploadAvatar(newFile);
  });
};
// 上传前对文件进行压缩
const handelFile = (file) => {
  // 使用压缩方法
  return new Promise((resolve, reject) => {
    new Compressor(file, {
      quality: 0.8, // 压缩质量，0 到 1，值越低文件越小
      maxWidth: 800, // 最大宽度
      maxHeight: 600, // 最大高度
      success(result) {
        // 直接返回压缩后的图像文件
        const imageFile = new File([result], file.name, { type: "image/jpeg" });
        resolve(imageFile); // 返回压缩后的图像文件
      },
      error(err) {
        reject(err); // 错误时返回异常
      },
    });
  });
};
// 回显头像
const ReviewAvatar = (file) => {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onloadend = (e) => {
    avatar.value = e.target.result;
  };
};
// 上传头像
const uploadAvatar = async (file) => {
  let formData = new FormData();
  formData.append("file", file);
  let res = await FileUpload(formData);
  if (res.status === 200) {
    user.userinfo["avatar"] = res.data.url;
    await updateUserInfo({ id: user.user_id, avatar: res.data.url });
    message.success("上传成功");
  } else message.error("上传失败");
  spinning.value = false;
};
</script>

<style lang="scss" scoped>
.userMain {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 15px;

  .descriptions {
    width: 100%;
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 15px;
    background-color: #fff;
    border-radius: 5px;
    .user-avatar {
      position: relative;
      .icon {
        position: absolute;
        bottom: 0;
        right: 0;
        background-color: #f2f3f5;
        color: skyblue;
        padding: 5px;
        border-radius: 50%;
      }
    }

    input {
      position: absolute;
    }

    .row {
      margin: 15px 0;
      .col {
        display: flex;
        align-items: center;
        gap: 15px;
        span {
          width: 80px;
          display: flex;
          justify-content: end;
          align-items: center;
          color: #909399;
        }
        div {
          color: #606266;
        }
      }
    }
  }
  .tabe-info {
    padding: 15px;
    border-radius: 5px;
    background-color: #fff;
  }
}
</style>
